<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Create Contest</title>
    <meta charset="UTF-8">
    <th:block th:insert="~{fragment/header :: header}"></th:block>
    <style>
        .ui.fluid.container {
            max-width: 85% !important;
        }
    </style>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/bootstrap-datetimepicker.min.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js"></script>
    <script src="/js/lib/bootstrap-datetimepicker.min.js"></script>
</head>
<body>
<div class="ui container" id="contest">
    Clone Contest:
    <div class="ui action input">
        <input type="text" v-model="clone_contest_id">
        <div class="ui button" v-on:click="clone_contest()">Clone</div>
    </div>

    <form class="ui form segment" v-on:submit.prevent>
        <div class="required field">
            <label>Title:</label><input name="title" required type="text" v-model="content.title">
        </div>
        <div class="field">
            <label>Description:</label><input name="description" type="text" v-model="content.description">
        </div>
        <div class="field" :class="{disabled:tid!=0}">
            <label>Privilege:</label>
            <select name="privilege" v-model="content.privilege">
                <option value="public">Public</option>
                <option value="private">Private</option>
                <option value="team" v-if="tid!=0">Team</option>
            </select>
        </div>
        <div class="field">
            <label>Password:(Private 填写)</label>
            <input name="password" type="text" v-model="content.password">
        </div>
        <div class="required field">
            <label>开始时间Start Time(yyyy-MM-dd HH:mm):</label>
            <input class="form-datetime form-control" data-date-format="yyyy-mm-dd hh:ii" id="startTime" minuteStep="1"
                   name="startTime" type="text" v-model="content.startTime">
        </div>
        <div class="required field">
            长度Length(分钟minutes):
            <input name="lastTime" placeholder="300" required type="number" v-model="content.length">
        </div>
        Problems (不可修改):
        <div class="ui icon mini buttons">
            <button @click="update_problem(1)" class="ui green inverted button"><i class="ui plus icon"></i></button>
            <button @click="update_problem(0)" class="ui red inverted button"><i class="ui minus icon"></i></button>
        </div>
        <div class="two inline fields" v-for="(p,i) in content.problems">
            <div class="required field"><label>id:</label><input @change="get_problem(p.id,i)" required type="number"
                                                                 v-model="p.id"></div>
            <div class="field" v-html="p.name"></div>
            <div class="required field">alias:<input type="text" v-model="p.tempTitle"></div>
        </div>
        <a @click="submit_form()" class="ui button green" id="submit-contest">提交Submit</a>
        <div class="ui error message"></div>
    </form>
</div>
<script type="text/javascript">
    $(function () {
        $(".form-datetime").datetimepicker();
    });
    var gid = location.pathname.split('/');
    gid = gid[gid.length - 1];
    var contest = new Vue({
        el: "#contest",
        data: {
            tid: gid,
            content: {
                title: "",
                tid: gid,
                description: "",
                privilege: gid == 0 ? "public" : "team",
                password: "",
                startTime: "",
                length: 300,
                problems: [{id: "", tempTitle: "", name: ""}]
            },
            clone_contest_id: ""
        },
        methods: {
            clone_contest() {
                var that = this;
                axios.get("/api/contest/clone/" + this.clone_contest_id)
                    .then(function (res) {
                        if (res.data.code == 200) {
                            that.content.title = res.data.data.title;
                            that.content.description = res.data.data.description;
                            that.content.problems = [];
                            for (p of res.data.data.problems) {
                                that.content.problems.push({
                                    id: p.id,
                                    tempTitle: p.tempTitle,
                                    name: p.problem.title
                                });
                            }
                        } else {
                            console.log(res.data);
                            alert(res.data.message);
                        }
                    })
            },
            get_problem(id, ind) {
                var that = this;
                console.log(id);
                axios.get("/api/problems/name/" + id)
                    .then(function (res) {
                        that.content.problems[ind].name = res.data == null ? "" : res.data;
                        that.content.problems[ind].tempTitle = that.content.problems[ind].name;
                    });
            },
            update_problem(opt) {
                if (opt === 1) {
                    this.content.problems.push({id: "", tempTitle: "", name: ""})
                } else {
                    this.content.problems.pop();
                }
            },
            form_validate() {
                if (this.content.title.length < 2) {
                    alert("title too short");
                    return false;
                }
                if (this.content.startTime.search(/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}$/) != 0) {
                    alert("日期格式错误");
                    return false;
                }
                for (p of this.content.problems) {
                    if ((p.id + "").length < 1) {
                        alert("id 不能为空")
                        return false;
                    }
                    if ((p.tempTitle + "").length < 1) {
                        alert("alias 不能为空");
                        return false;
                    }
                }
                return true;
            },

            submit_form() {
                this.content.startTime = $("#startTime").val();
                if (!this.form_validate()) {
                    return false;
                }

                console.log(this.content);
                axios.post("/api/contest/create", this.content)
                    .then(function (res) {
                        res = res.data;
                        if (res == "success") {
                            alert("success");
                            location.href = "/contest"
                        } else {
                            alert(res);
                        }
                    })
                    .catch(function () {
                        alert("Error");
                    });
            }
        }
    })
</script>
</body>
</html>
